<template>
  <div>
    <ul class="shezhi">
      <li>
        <p @click="fun()">&lt;</p>
        <span>设置</span>
      </li>
      <li>
        <span>关怀版<p>更大字体 极简操作 语音播报</p></span>
        <van-switch v-model="checked" />
      </li>
      <li>
        <span>摇一摇</span>
        <van-switch v-model="checked2" />
      </li>
      <li>
        <span>个性化推荐</span>
        <van-switch v-model="checked3" />
      </li>
      <li>
        <span>账号与安全</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>登陆设置</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>消息推送设置</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>常驻通知栏设置</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>绑定推荐人</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>清除缓存</span>
        <p>已使用34.5MB</p>
      </li>
      <li>
        <span>帮助中心</span>
        <p>&gt;</p>
      </li>
      <li>
        <span>关于我们</span>
        <p>&gt;</p>
      </li>
      <router-link to="Denglu">
        <li>
        登录
       </li>
      </router-link>
    </ul>
  </div>
</template>

<script scoped>
export default {
   data() {
    return {
      checked: false,
      checked2:true,
      checked3:true,
    };
  },
  methods:{
    fun(){
      this.$router.go(-1)
    },
  }
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration-line: none;
  list-style-type: none;
}
.shezhi{
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.shezhi li{
  width: 90%;height: 0.48rem;
  margin: auto;
  background-color: white;
}
.shezhi li:nth-child(1){
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shezhi li:nth-child(1) p{
  font-size: 0.26rem;
  position: absolute;
  left: 0.3rem;
}
.shezhi li:nth-child(1) span{
  font-size: 0.22rem;
}
.shezhi li:nth-child(2){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(2) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(2) span p{
  font-size: 0.1rem;
  color: gray;
  margin-top: 0.03rem;
}

.shezhi li:nth-child(3){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(3) span{
  font-size: 0.16rem;
}

.shezhi li:nth-child(4){
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(4) span{
  font-size: 0.16rem;
}

.shezhi li:nth-child(5){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(5) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(5) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;
}

.shezhi li:nth-child(6){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(6) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(6) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;
}

.shezhi li:nth-child(7){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(7) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(7) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;
}

.shezhi li:nth-child(8){
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(8) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(8) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;
}

.shezhi li:nth-child(9){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(9) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(9) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;  
}

.shezhi li:nth-child(10){
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(10) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(10) p{
  font-size: 0.1rem;
  color: gray;
  margin-right: 0.2rem;  
}

.shezhi li:nth-child(11){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(11) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(11) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;  
}

.shezhi li:nth-child(12){
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shezhi li:nth-child(12) span{
  font-size: 0.16rem;
}
.shezhi li:nth-child(12) p{
  font-size: 0.3rem;
  color: gray;
  margin-right: 0.2rem;  
}

.shezhi a li{
  border-radius: 0.2rem;
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.48rem;
  color: white;
  background-color: rgba(0, 0, 255, 0.589);
}
</style>
